<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <h1 align='center'>
        <!-- 命名的app节点 -->
        <div id="app">
            <p>我最喜欢的人是：{{mylove}}</p>
            <input type="text" v-model='mylove'>

            <br><br><br><br>

            <p>您最喜欢的游戏是：{{mygame}}</p>
            <button v-on:click="btnClick('我的世界')">我的世界</button>
            <button v-on:click="btnClick('勇者斗恶龙')">勇者斗恶龙</button>
            <button v-on:click="btnClick('塞尔达传说')">塞尔达传说</button>
            <button @click="btnClick('魔界战记5')">魔界战记5</button>

            <br><br><br><br>

            <ol> 
                <!-- 创建一个game-item组件，可由自己命名 -->
                <game-item v-for="item in games" v-bind:game="item"></game-item>
            </ol>
        </div>
    </h1>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <!-- 要有下面那个东西，vue的一些语句才能用 -->
    <script src="../js/vue.js"></script>

    <script>
        // 组件定义: game-item
        Vue.component('game-item',{
            props:['game'],
            template:'<li>{{game.title}}</li>' //创建template模板
        })
        let app = new Vue({ //实例化Vue
            el: '#app', //连接app节点
            data() { //一个方法
                return { //返回一个对象
                    mylove: '你',
                    mygame: '超级马里奥',
                    games:[
                        {title:'斗地主'},
                        {title:'狼人杀'},
                        {title:'uno'}
                ]
                }
            },
            methods: {
                btnClick: function (pname) {
                    this.mygame = pname;
                },
            }
        })
    </script>
</body>

</html>